import {Card, CardActionArea, CardActions, CardContent, CardMedia, Skeleton, Typography} from "@mui/material";
import React from "react";

export default function TopList(props) {
    let {from,imgUrl,name,auth,f} = props;
    let loading = false;
    let fromIcon;
    if (from === "163") {
        fromIcon = './ico163.png';
    } else if (from === "qq") {
        fromIcon = './icoqq.png';
    } else if (from === "kugou") {
        if (imgUrl !== undefined) {
            imgUrl = imgUrl.replace("{size}", "150");
            fromIcon = './icokugou.png';
        }
    } else if (from === "migu") {
        fromIcon = './icomigu.png';
    } else if (from === "kuwo") {
        fromIcon = './icokuwo.png';
    }
    function togo(){
        f(props)
    }
    function errorImg(e){
        e.target.src = '/listico.png'
    }
    return (
        <div>
            <Card sx={{minWidth: 300, maxWidth: 300, marginTop: 1}}>
                <CardActionArea onClick={togo}>
                    {loading ? (
                        <Skeleton sx={{height: 220, width: 300}} animation="wave" variant="rectangular"/>
                    ) : (
                        <CardMedia
                            component="img"
                            height="194"
                            image={imgUrl}
                            alt="face"
                            onError={errorImg}

                        />)}
                    <CardContent>
                        {loading ? (
                            <React.Fragment>
                                <Skeleton animation="wave" height={20} style={{marginBottom: 6}}/>
                                <Skeleton animation="wave" height={20} style={{marginBottom: 10}}/>
                                <Skeleton animation="wave" height={10} width="80%"/>
                            </React.Fragment>
                        ) : (
                            <>
                                <Typography height='64px' gutterBottom variant="h6" component="div">
                                    {name}
                                </Typography>
                                <Typography variant="body2" color="text.secondary" sx={{overflow: 'auto'}}
                                            maxHeight={20}>
                                    {"by  " + auth}
                                </Typography>
                            </>
                        )
                        }
                    </CardContent>
                </CardActionArea>
                <CardActions disableSpacing>
                    {
                        loading ? (
                            <Skeleton animation="wave" variant="circular" width={16} height={16}/>
                        ) : (
                            <img src={fromIcon} width='16px' height='16px'/>
                        )
                    }
                </CardActions>
            </Card>
        </div>
    );

}
